<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import 'echarts-gl'

require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      let base = +new Date(1988, 9, 3)
      const oneDay = 24 * 3600 * 1000
      const data = [[base, Math.random() * 300]]
      for (let i = 1; i < 20000; i++) {
        const now = new Date((base += oneDay))
        data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])])
      }
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        title: {
          left: 'center',
          text: 'Large Ara Chart'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'time',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20
          },
          {
            start: 0,
            end: 20
          }
        ],
        visualMap: [
          {
            top: 50,
            right: 10,
            pieces: [
              {
                gt: 0,
                lte: 50,
                color: '#93CE07'
              },
              {
                gt: 50,
                lte: 100,
                color: '#FBDB0F'
              },
              {
                gt: 100,
                lte: 150,
                color: '#FC7D02'
              },
              {
                gt: 150,
                lte: 200,
                color: '#FD0100'
              },
              {
                gt: 200,
                lte: 300,
                color: '#AA069F'
              },
              {
                gt: 300,
                color: '#AC3B2A'
              }
            ],
            outOfRange: {
              color: '#999'
            }
          },
          {
            top: 50,
            left: 10,
            pieces: [
              {
                gt: 0,
                lte: 50,
                color: '#93CE07'
              },
              {
                gt: 50,
                lte: 100,
                color: '#FBDB0F'
              },
              {
                gt: 100,
                lte: 150,
                color: '#FC7D02'
              },
              {
                gt: 150,
                lte: 200,
                color: '#FD0100'
              },
              {
                gt: 200,
                lte: 300,
                color: '#AA069F'
              },
              {
                gt: 300,
                color: '#AC3B2A'
              }
            ],
            outOfRange: {
              color: '#999'
            }
          }
        ],
        series: [
          // {
          //   name: 'Fake Data',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   areaStyle: {},
          //   data: data
          // },
          {
            name: 'Highest',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: 'Lowest',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      })
    }
  }
}
</script>
